<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <h1 onclick="f()">1111</h1>

    <h2>222</h2>

    <script>

        // 'use strict';



        // 1 在一般情况下  this -> window
        // 2 严格模式下，普通函数的 this 无指向
        // 3 在事件中除了行内事件以外，事件处理函数的this都是指向事件源(绑定事件的对象)的
        // 4 在对象中，方法的this指向对象本身
        // 5 在箭头函数中, this没有自己的指向，上一层函数指向谁就指向谁

        // 函数属于谁 ，this就指向谁  ******************


        // document.onclick = function () {
        //     console.log(this);
        // }



        // document.onclick = f;

        // function f() {
        //     console.log(this);
        // }


        // const oH2 = document.querySelector('h2');
        // oH2.onclick = f



        // console.log(this);   // window

        // function f() {
        //     console.log(this);
        // }

        // f()


        // setTimeout(function () {
        //     console.log(this);   // window
        // }, 100)


        // const obj = {
        //     a: 1,
        //     say: function () {
        //         // console.log(obj.a);
        //         console.log(this.a);    // obj
        //     }
        // };


        // obj.speak = function () {
        //     console.log(this);   // obj
        // }

        // obj.say()

        // obj.speak()



        document.onclick = function () {
            console.log(this);    // document
            let _this = this;   // 如果this指向发生了改变，可以在改变之前把this存起来--存在变量中
            setTimeout(function () {
                console.log(this);   // window
                console.log(_this);
            })

        }


        const obj = {
            name: 'cc',
            say: function () {
                console.log(this);   // obj
                // setTimeout(function () {
                //     console.log(this);    // window
                // })

                function f() {
                    console.log(this);  // window
                }
                f()
            }
        }

        obj.say()


    </script>

</body>

</html>